<template>
  <div class="mk-contact">
    <div class="swiper-container swiper1">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item) in bannerLists">
          <img :src="item.banner_pic" alt>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="bread-nav">
      <div class="nav-box">
        <span>您的位置：</span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">网站首页</el-breadcrumb-item>
          <el-breadcrumb-item>联系我们</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="content">
      <h3 class="title">联系我们</h3>
      <h4 class="sub-title">Contact us</h4>
      <div class="info">
        <div class="info-item">
          <div class="icon">
            <img src="../assets/phone2.png" alt>
          </div>
          <span class="option">公司电话</span>
          <span class="phone-num">025—86658313\86620225</span>
        </div>
        <div class="info-item">
          <div class="icon">
            <img src="../assets/phone3.png" alt>
          </div>
          <span class="option">手机号码</span>
          <span class="phone-num">13865900683</span>
        </div>
        <div class="info-item">
          <div class="icon">
            <img src="../assets/map.png" alt>
          </div>
          <span class="option">公司地址</span>
          <span class="phone-num">南京市建邺区江东中路98号万达广场E栋</span>
        </div>
      </div>
      <baidu-map
        :center="center"
        :zoom="zoom"
        class="map"
        @ready="handler"
        :scroll-wheel-zoom="true"
      ></baidu-map>
      <div class="submit-content">
        <div class="block">
          <el-input v-model="name" placeholder="姓名" clearable></el-input>
          <el-input v-model="phone" placeholder="电话" clearable></el-input>
        </div>
        <div class="block">
          <el-select v-model="value" placeholder="业务类型">
            <el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-input v-model="email" placeholder="电子邮箱" clearable></el-input>
        </div>
        <el-input type="textarea" placeholder="请输入内容" v-model="textarea"></el-input>
        <button class="submit" @click="submit">提交</button>
      </div>
    </div>
  </div>
</template>
<script>
import getData from "../api/getInfo";

export default {
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 1,
      point: { lng: 0, lat: 0 },
      value: "",
      bannerLists: [],
      type: [],
      name: "",
      phone: "",
      email: "",
      textarea: ""
    };
  },
  mounted() {
    this.getBanner();
    this.getType();
  },
  methods: {
    submit() {
      let phoneReg = /^1[34578]\d{9}$/;
      let emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      let name = this.name;
      let phone = this.phone;
      let value = this.value;
      let email = this.email;
      let textarea = this.textarea;
      if (name == "") {
        this.$message.error("请填写姓名");
      } else if (phone == "" || !phoneReg.test(phone)) {
        this.$message.error("请填写正确的电话");
      } else if (value == "") {
        this.$message.error("请选择业务类型");
      } else if (email == "" || !emailReg.test(email)) {
        this.$message.error("请填写正确的邮箱");
      } else if (textarea == "") {
        this.$message.error("请填写内容");
      } else {
        getData
          .submitContent({
            name: name,
            tel: phone,
            type_id: value,
            email: email,
            content: textarea
          })
          .then(res => {
            // console.log(res);
          })
          .catch(e => {
            console.log(e);
          });
        setTimeout(() => {
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.name = "";
          this.phone = "";
          this.value = "";
          this.email = "";
          this.textarea = "";
        }, 800);
      }
    },
    handler({ BMap, map }) {
      this.center.lng = 118.744;
      this.center.lat = 32.039;
      this.point.lng = 118.744;
      this.point.lat = 32.039;
      this.zoom = 15;
      let marker = new BMap.Marker(this.point);
      map.addOverlay(marker);
    },
    initSwiper() {
      let mySwiper = new Swiper(".swiper1", {
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
           bulletActiveClass: "my-bullet-active"
        },
        observer: true
      });
    },
    //获取banner图
    getBanner() {
      getData
        .getBanner()
        .then(res => {
          let tempArr = [];
          res.data.forEach((val, index) => {
            if (val.type == 5) {
              val.banner_pic = `${getData.url}${val.banner_pic}`;
              tempArr.push(val);
            }
          });
          this.bannerLists = tempArr;
          this.$nextTick(() => {
            // 下一个UI帧再初始化swiper
            this.initSwiper();
          });
        })
        .catch(e => {
          console.log(e);
        });
    },
    //获取banner图
    getType() {
      getData
        .getType()
        .then(res => {
          this.type = res.data;
        })
        .catch(e => {
          console.log(e);
        });
    }
  }
};
</script>
<style scoped lang="scss">
.swiper-container {
  height: 505px;
  width: 100%;
}
/deep/.bread-nav {
  width: 100%;
  height: 52px;
  background: #f6f6f6;
  .nav-box {
    width: 1200px;
    height: 52px;
    line-height: 52px;
    margin: 0 auto;
    display: flex;
    span,
    a {
      font-size: 14px;
      color: #9d9d9d;
    }
    .current {
      color: #96ce54;
    }
    .el-breadcrumb {
      line-height: 52px;
    }
    .el-breadcrumb__inner {
      color: #96ce54;
    }
    .el-breadcrumb__inner.is-link {
      color: #9d9d9d;
      font-weight: normal;
    }
  }
}
/deep/.content {
  width: 1200px;
  padding-bottom: 100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    font-size: 36px;
    color: #323232;
    margin: 76px 0 6px 0;
  }
  .sub-title {
    font-size: 18px;
    color: #b8b7b7;
    margin-bottom: 70px;
  }
  .info {
    width: 801px;
    height: 138px;
    display: flex;
    .info-item {
      width: 267px;
      height: 100%;
    }
    .info-item:nth-child(1) {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      .icon {
        width: 62px;
        height: 62px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .option {
        font-size: 16px;
        color: #323232;
      }
      .phone-num {
        font-size: 14px;
        color: #999999;
      }
    }
    .info-item:nth-child(2) {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      .icon {
        width: 47px;
        height: 67px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .option {
        font-size: 16px;
        color: #323232;
      }
      .phone-num {
        font-size: 14px;
        color: #999999;
      }
    }
    .info-item:nth-child(3) {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      .icon {
        width: 52px;
        height: 52px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .option {
        font-size: 16px;
        color: #323232;
      }
      .phone-num {
        font-size: 14px;
        color: #999999;
      }
    }
  }
  .map {
    width: 978px;
    height: 372px;
    margin-top: 70px;
  }
  .submit-content {
    display: flex;
    flex-direction: column;
    width: 978px;
    margin-top: 60px;
    .block {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      .el-input {
        width: 478px;
        height: 56px;
        input {
          height: 100%;
          background: #ebebeb;
          border: none;
          color: #757575;
          font-size: 18px;
        }
      }
    }
    .el-textarea {
      height: 324px;
      textarea {
        height: 100%;
        background-color: #ebebeb;
        border: none;
        resize: none;
        font-size: 18px;
        font-family: Arial, Helvetica, sans-serif;
      }
    }
    .submit {
      width: 390px;
      height: 63px;
      background-color: #96ce54;
      border: none;
      margin-top: 15px;
      font-size: 20px;
      color: #fff;
      outline: none;
    }
  }
}
</style>